<template>
    <Panel>
        <Tabs v-if="documents">
            <Tab name="Utility Bills" :selected="true">
                <SecondaryTabs>
                    <Tab name="Electric" :selected="true">
                        <table>
                            <thead class="table-header--white">
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Bill Date</th>
                                <th>Amount (USD)</th>
                                <th>Issued By</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="document in getDocumentsByType('utility_bill', 'Electric')">
                                <td>{{ document.name }}</td>
                                <td>{{ document.type }}</td>
                                <td>{{ document.bill_date }}</td>
                                <td>{{ document.amount }}</td>
                                <td>{{ document.issued_by }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Tab>
                    <Tab name="Natural Gas">
                        <table>
                            <thead class="table-header--white">
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Bill Date</th>
                                <th>Amount (USD)</th>
                                <th>Issued By</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="document in getDocumentsByType('utility_bill', 'Natural Gas')">
                                <td>{{ document.name }}</td>
                                <td>{{ document.type }}</td>
                                <td>{{ document.bill_date }}</td>
                                <td>{{ document.amount }}</td>
                                <td>{{ document.issued_by }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Tab>
                    <Tab name="Water">
                        <table>
                            <thead class="table-header--white">
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Bill Date</th>
                                <th>Amount (USD)</th>
                                <th>Issued By</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="document in getDocumentsByType('utility_bill', 'Water')">
                                <td>{{ document.name }}</td>
                                <td>{{ document.type }}</td>
                                <td>{{ document.bill_date }}</td>
                                <td>{{ document.amount }}</td>
                                <td>{{ document.issued_by }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Tab>
                    <Tab name="Waste &amp; Sewer">
                        <table>
                            <thead class="table-header--white">
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Bill Date</th>
                                <th>Amount (USD)</th>
                                <th>Issued By</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="document in getDocumentsByType('utility_bill', 'Waste and Sewer')">
                                <td>{{ document.name }}</td>
                                <td>{{ document.type }}</td>
                                <td>{{ document.bill_date }}</td>
                                <td>{{ document.amount }}</td>
                                <td>{{ document.issued_by }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Tab>
                </SecondaryTabs>
            </Tab>
            <Tab name="Architectural Drawings">
                <div class="panel__pad">
                    Content
                </div>
            </Tab>
            <Tab name="Mechanical Drawings">
                <div class="panel__pad">
                    Content
                </div>
            </Tab>
            <Tab name="Electrical Drawings">
                <div class="panel__pad">
                    Content
                </div>
            </Tab>
            <Tab name="Manuals">
                <div class="panel__pad">
                    Content
                </div>
            </Tab>
        </Tabs>
    </Panel>
</template>
<script>
    import axios from 'axios'
    import dateFormat from 'dateformat'
    import Panel from './Panel.vue'
    import SecondaryTabs from './SecondaryTabs.vue'
    import Tab from './Tab.vue'
    import Tabs from './Tabs.vue'

    export default {

        components: {
            Panel,
            SecondaryTabs,
            Tab,
            Tabs
        },

        props: [
            'documents'
        ],

        data() {
            return {
            }
        },

        methods: {
            getDocumentsByType: function(type, category) {
                var documents = [];

                this.documents.forEach(document => {
                    if(document['doc_type'] == type && document['category'] == category) {
                        documents.push(document);
                    }
                });

                return documents;
            }
        }

    }
</script>